<template name="basics">
   <view class="hh-bj" >
		<view>
			<cu-custom bgColor="bg-gradual-blue" :isBack="false">
				<block slot="content">移动巡检</block>
			</cu-custom>
		</view>
		<view >
			<scroll-view  show-scrollbar="false" class="page">
				<view class="nav-list">
					<navigator hover-class="none" :url="'/pages/basics/xs/' + item.url" class="nav-li hh-item" navigateTo :class="'bg-'+item.color"
					 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
						<view class="nav-title">{{item.title}}</view>
						<view class="nav-name">{{item.name}}</view>
						<text :class="'cuIcon-' + item.cuIcon"></text>
					</navigator>
				</view>
				<view class="cu-tabbar-height"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "basics",
		data() {
			return {
				elements: [{
						title: '巡视任务',
						name: '任务数：25 条',
						color: 'cyan',
						cuIcon: 'newsfill',
						url: 'xs1'
					},
					{
						title: '看护任务',
						name: '任务数：45 条',
						color: 'blue',
						cuIcon: 'colorlens',
						url: 'xs1'
					},
					{
						title: '检测任务',
						name: '任务数：16 条',
						color: 'purple',
						cuIcon: 'font',
						url: 'xs1'
					},
					{
						title: '检修任务',
						name: '任务数：75 条',
						color: 'mauve',
						cuIcon: 'cuIcon',
						url: 'xs1'
					}
				],
			};
		},
		onShow() {
			console.log("success")
		}
	}
</script>

<style>
	.page {
		margin-top:20%;
		height: 100%;
	}
	.hh-item {
		margin-top:15%;
	}
	.hh-bj
	{
		height: 100vh;
	} 
	 
</style>
